<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增记录资讯详细信息')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add">
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">资讯编码，10位字符数字编码：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="newsCode" class="form-control" type="text" required>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">资讯标题：</label>
                <div class="col-sm-8">
                    <input name="newsTitle" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">资讯分类：</label>
                <div class="col-sm-8">
                    <!--                    <input name="newsTypeId" th:field="*{newsTypeId}" class="form-control" type="text">-->
                    <select name="newsTypeId" class="form-control"  >
                        <option th:value="${newsType.newsTypeId}" th:text="${newsType.newsTypeName}" th:each="newsType : ${ztNewsType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">温馨提示：</label>
                <div class="col-sm-8">
                    <input name="prompt" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">资讯描述：</label>
                <div class="col-sm-8">
                    <input name="newsDescription" class="form-control" type="text">
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">产品封面图：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input id="img_put" class="form-control" name="newsLogo" type="text" />-->
<!--                    <div id="img_url">-->
<!--                    </div>-->
<!--                    <button type="button" onclick="toempty()">清空</button>-->
<!--                    <div id="zyupload" class="zyupload"></div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="font-noraml">产品封面图：</label>
                <input id="img_put" class="form-control" name="newsLogo" type="text" >
                <div class="file-loading">
                    <input id="fileinput-demo-1" name="file"  type="file" multiple>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>资讯介绍(富文本)： </h5>
                    </div>
                    <div class="ibox-content no-padding">
                        <input id="introduce" name="introduce" type="hidden">
                        <div class="summernote">
                        </div>
                    </div>
                </div>
            </div>
<!--            <div class="col-sm-12">-->
<!--                <label class="col-sm-3 control-label">资讯介绍：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input id="introduce" name="introduce" type="hidden">-->
<!--                    <div class="summernote"></div>-->
<!--                </div>-->
<!--            </div>-->

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
        var prefix = ctx + "jsrh/news"
        $("#form-info-add").validate({
            focusCleanup: true
        });
        function toempty(){
            $("#img_url").html('');
            $("#img_put").val('');
        }

        $('.summernote').summernote({
            placeholder: '请输入公告内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });

        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }



        function submitHandler() {
            if ($.validate.form()) {
                var sHTML = $('.summernote').summernote('code');
                $("#introduce").val(sHTML);
                $.operate.save(prefix + "/add", $('#form-info-add').serialize());
            }
        }

        $(document).ready(function () {
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': '/common/upload',
                overwriteInitial: false,
                initialPreviewAsData: true,
                maxFileCount: 0,
                initialPreview: [
                    // "/img/profile.jpg"
                ]
            });
            var imgList = "";
            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                console.log(data)
                if(data !=null && data.response.code == 0){
                    // $("#img_put").val(data.response.url)
                    $("#img_put").val("");
                    if (imgList == "") {
                        imgList = data.response.url
                    } else {
                        imgList = imgList + "," + data.response.url
                    }
                    $("#img_put").val(imgList)
                }
            })

        });



        // $(function () {
        //
        //     //setUeEditor('container',"${(productInfo.introduce)!''}")
        //
        //     var imgList = "";
        //     $("#zyupload").zyUpload({
        //         width: "100%",                 // 宽度
        //         height: "400px",                 // 宽度
        //         itemWidth: "140px",                 // 文件项的宽度
        //         itemHeight: "115px",                 // 文件项的高度
        //         // url: "/site/common/upload/images",  // 上传文件的路径
        //         url: "/common/upload",  // 上传文件的路径
        //         fileType: ["jpg", "png", "PNG", "JPG"],// 上传文件的类型
        //         fileSize: 51200000,                // 上传文件的大小
        //         multiple: false,                    // 是否可以多个文件上传
        //         dragDrop: true,                    // 是否可以拖动上传文件
        //         tailor: true,                    // 是否可以裁剪图片
        //         del: true,                    // 是否可以删除文件
        //         finishDel: false,                    // 是否在上传文件完成后删除预览
        //         /* 外部获得的回调接口 */
        //         // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
        //         onSelect: function (selectFiles, allFiles) {
        //         },
        //         // 删除一个文件的回调方法
        //         onDelete: function (file) {
        //         },
        //         // 每文件上传成功的回调方法
        //         onSuccess: function (file, result) {
        //             alert("此文件上传成功：" + file.name);
        //             var result = JSON.parse(result);
        //
        //             if (result.code == web_status.SUCCESS) {
        //                 //这里单文件
        //                 $("#img_put").val("");
        //                 if (imgList == "") {
        //                     imgList = result.url
        //                 } else {
        //                     imgList = imgList + "," + result.url
        //                 }
        //                 $("#img_put").val(imgList)
        //                 var infoDiv=$("<img src='"+result.url+"' style='width: 100px;height: 100px;'></img>");
        //                 $("#img_url").append(infoDiv);
        //             } else {
        //                 $.modal.alertError(result.msg);
        //             }
        //         },
        //         // 文件上传失败的回调方法
        //         onFailure: function (file, response) {
        //             alert("此文件上传失败:" + file.name);
        //         },
        //         // 上传完成的回调方法
        //         onComplete: function (response) {
        //
        //         }
        //     });
        // })



    </script>
</body>
</html>